<template>
    <view>
		<view class="p-4 flex flex-column grid-gap-4" v-if="list.length>0||loading==='loading'">
			<view class="bg-white rounded-4 p-4" v-for="(item, index) in list" :key="index">
				<x-technician-item :item="item">
					<template #action>
						<button class="btn-danger-light-3 btn-round" size="mini" @tap.stop="collect(item, index)">
							取消关注
						</button>
					</template>
				</x-technician-item>
			</view>
			<x-more :status="loading" @load="getList"></x-more>
		</view>
		<view class="vh-50 flex flex-center" v-else>
			<x-empty type="log" text="暂无关注"></x-empty>
		</view>
    </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { $api, $message, $page } from '@/utils';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
const loading = ref('loadmore');
const list = ref([]);
const search = ref({
	page: 1,
	keywords: '',
});
const getList=()=>{
	if (loading.value === 'loading' || loading.value === 'nomore') return;
	loading.value = 'loading';
	$api.Collect.technicianList(search.value).then(data => {
		list.value = [...list.value, ...data.data];
		search.value.page++;
		if (data.current_page >= data.last_page) {
			nextTick(() => {
				loading.value = 'nomore';
			})
		}
	}).catch(() => {
		nextTick(() => {
			loading.value = 'nomore';
		})
	}).finally(() => {
		if (loading.value === 'loading') {
			loading.value = 'loadmore';
		}
	})
}
const collect=(item:any, index:number)=>{
	$api.Collect.technician(item.technician_id).then((data) => {
		list.value.splice(index, 1);
	}).catch(err => {
		$message.error(err.msg);
	})
}
onLoad(() => {
	getList();
})
onReachBottom(() => {
	getList();
})
</script>
<style lang="scss" scoped></style>
